<template>
	<view>
		<view class="ReadCost_top">
			账号：{{username}}
			<view>余额：<text>0</text></view>
		</view>
		<view class="ReadCost_center">
			<view class="ReadCost_tr">
				<view>￥6</view>
				<view>￥30</view>
				<view>￥50</view>
			</view>
			<view class="ReadCost_tr">
				<view>￥100</view>
				<view>￥200</view>
				<view>￥365</view>
			</view>
			<view class="ReadCost_tr">
				<view>￥520</view>
				<view>￥648</view>
				<view>￥888</view>
			</view>
			<view class="ReadCost_tr">
				<view>￥1314</view>
				<view>￥3000</view>
				<view class="ReadCost_td">￥自定义</view>
			</view>
		</view>
		<view class="ReadCost_confirm">确认充值</view>
		<view class="ReadCost_end">
			<text>充值说明\n</text>
				阅读点为“无线阅读”小程序的虚拟货币，用于解锁小说的付费章节。书友们可通过本平台的充值服务获得相应的阅读点。
			<text>\n</text>
				充值总换比例：
			<text>1RMB = 10阅读点</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
      return{
        username:''
      }
		},
    onLoad() {
      this.username = uni.getStorageSync('username')
      console.log(this.username)
    }
	}
</script>

<style lang="scss">
	body{
		background-color: #ea0036;
	}
	.ReadCost_top{
		width: 76vw;
		height: 10vh;
		margin: 1vh auto;
		background-color: #FFFFFF;
		border-radius: 3vw 3vw 0 0;
		box-shadow: 2px 2px 5px #888888;
		padding: 0 10vw;
		line-height: 10vh;
	}
	.ReadCost_top view{
		float: right;
	}
	.ReadCost_top text{
		font-weight: bold;
		font-size: 3vh;
	}

	.ReadCost_center{
		width: 90vw;
		height: 40vh;
		margin: auto;
	}
	.ReadCost_tr view{
		text-align: center;
		float: left;
		width: 19vw;
		margin: 5vw;
		height: 4vh;
		line-height: 4vh;
		background-color:#FFFFFF;
		border: 1px solid #DCDFE6;
	}
	.ReadCost_confirm{
		width: 90vw;
		height: 5vh;
		line-height: 5vh;
		text-align: center;
		border-radius: 2.5vh;
		border: 1px solid #EBEEF5;
		margin: auto;
		background-color: #FFFFFF;
	}
	.ReadCost_end{
		width: 76vw;
		height: 25vh;
		margin: 5vh auto;
		background-color: #FFFFFF;
		border-radius: 3vw 0;
		box-shadow: 2px 2px 5px #888888;
		padding: 2vw 5vw;
		line-height: 4vh;
	}
	.ReadCost_end text{
		font-weight: bold;
	}
	.ReadCost_td{
		font-size: 13px;
		color: #C8C7CC;
	}
</style>
